<template>
  <div class="food-input">
    <h2>懒人指南 - 今晚想吃什么？</h2>
    <div class="input-container">
      <input 
        v-model="userInput" 
        placeholder="请输入想吃的菜品，例如：番茄炒蛋" 
        @keyup.enter="analyzeFood"
        class="food-input-field"
      />
      <button @click="analyzeFood" class="analyze-button">分析</button>
    </div>
    
    <div class="quick-select">
      <h3>快速选择：</h3>
      <div class="quick-buttons">
        <button 
          v-for="dish in commonDishes" 
          :key="dish" 
          @click="selectDish(dish)"
          class="quick-button"
        >
          {{ dish }}
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { getAllDishNames } from '../data/recipes.js';

const props = defineProps({
  onAnalyze: {
    type: Function,
    required: true
  }
});

const userInput = ref('');
const commonDishes = getAllDishNames();

const analyzeFood = () => {
  if (userInput.value.trim()) {
    props.onAnalyze(userInput.value);
  }
};

const selectDish = (dishName) => {
  userInput.value = dishName;
  props.onAnalyze(dishName);
};
</script>

<style scoped>
.food-input {
  padding: 20px;
  text-align: center;
}

.input-container {
  display: flex;
  justify-content: center;
  margin: 20px 0;
  gap: 10px;
}

.food-input-field {
  padding: 12px 15px;
  font-size: 16px;
  border: 2px solid #42b883;
  border-radius: 25px;
  width: 300px;
  outline: none;
  transition: border-color 0.3s;
}

.food-input-field:focus {
  border-color: #36986f;
}

.analyze-button {
  padding: 12px 20px;
  background-color: #42b883;
  color: white;
  border: none;
  border-radius: 25px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s;
}

.analyze-button:hover {
  background-color: #36986f;
}

.quick-select {
  margin-top: 30px;
}

.quick-select h3 {
  margin-bottom: 15px;
  color: #333;
}

.quick-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.quick-button {
  padding: 8px 15px;
  background-color: #f0f0f0;
  border: none;
  border-radius: 15px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.quick-button:hover {
  background-color: #e0e0e0;
}
</style>
